<template>
  <BasicModal
    v-bind="$attrs"
    :width="modalWidth"
    @register="registerModal"
    @ok="handleOK"
    title="节点信息"
  >
    <BasicTable @register="registerTable" />
    视频信息 任务id: {{taskId}}
    <BasicTable @register="registerTableVideo" />
  </BasicModal>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { BasicModal, useModalInner } from '@/components/Modal';
  import { BasicTable, useTable } from '@/components/Table';
  import { OnematchNodeDetailAPI, dataTaskPageAPI } from '@/api/demo/InformationMatching';
  import { useI18n } from "@/hooks/web/useI18n";

  const { t } = useI18n();
  const emit = defineEmits(['success']);
  const Data = ref<any>([]); // 定义 Data 为响应式变量
  const pagination = ref({
    current: 1,
    pageSize: 10,
    total: 0,
  });
  const DataVideo = ref<any>([]);
  const taskId = ref('0');
  defineOptions({ name: 'AccountModal' });

  const modalWidth = ref('45%');

  const columns = ref([
    {
      title: t('sys.informaionMatchaing.columns.createTime'),
      dataIndex: 'creatTime',
      width: 150,
    },
    {
      title: '当前块/总块',
      dataIndex: 'keyword',
      width: 100,
      customRender: ({ record }) => {
        return `${record.current}/${record.total}`;
      },
    },
    {
      title: '已完成数/总数',
      dataIndex: 'sum',
      width: 100,
      customRender: ({ record }) => {
        return `${record.num}/${record.sum}`;
      },
    },
    {
      title: '最小距离/最大距离',
      dataIndex: 'keyword',
      width: 150,
      customRender: ({ record }) => {
        return `${record.minDistance}/${record.maxDistance}`;
      },
    },
  ]);

  const columnsVideo = ref([
    {
      title: 'id',
      dataIndex: 'id',
    },
    {
      title: t('sys.informaionMatchaing.columns.url'),
      dataIndex: 'url',
    },
    {
      title: t('sys.video.columns.introduction'),
      dataIndex: 'introduction',
    },
    {
      title: t('sys.video.columns.content'),
      dataIndex: 'content',
    },
  ]);

  const [registerTable, { reload }] = useTable({
    columns: columns.value,
    dataSource: Data,
    pagination: false,
    bordered: true,
    scroll: { y: 300 }, // 设置高度自适应
  });

  const [registerTableVideo] = useTable({
    columns: columnsVideo.value,
    dataSource: DataVideo,
    bordered: true,
  });

  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
    taskId.value = data.record.id;
    setModalProps({ confirmLoading: true, showOkBtn: false });
    try {
      await fetchData({
        taskId: data.record.id,
        current: pagination.value.current,
        size: pagination.value.pageSize,
      });

      await fetchDataVideo({
        taskId: data.record.id,
        current: pagination.value.current,
        size: pagination.value.pageSize,
      });
    } finally {
      setModalProps({ confirmLoading: false });
    }
  });

  async function fetchData(params) {
    const response = await OnematchNodeDetailAPI(params);
    Data.value = response.data.records;
    pagination.value.total = response.total;
    reload();
  }

  async function fetchDataVideo(params) {
    const response = await dataTaskPageAPI(params);
    DataVideo.value = response.data.records;
    pagination.value.total = response.total;
    reload();
  }

  async function handleOK() {
    emit('success', {}); // 触发 success 事件
    closeModal();
  }
</script>
<style scoped>
  .divList {
    padding: 10px;
  }
  .divList > span {
    margin-right: 30px;
  }
</style>
